﻿@model string
@{
    ViewBag.Title = "Customers";
}

<h2>Customers</h2>

<p>
    @Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-sm btn-primary" })
</p>
<table ng-controller="ItemsController" ng-table="tableParams" class="table" template-pagination="custompager" show-filter="true">
    <tr ng-repeat="item in items">
        <td data-title="'FirstName'" filter="{ 'FirstName': 'text' }" sortable="'FirstName'">
            {{item.FirstName}}
        </td>
        <td data-title="'LastName'" filter="{ 'LastName': 'text' }" sortable="'LastName'">
            {{item.LastName}}
        </td>
        <td data-title="'Company'" filter="{ 'Company': 'text' }" sortable="'Company'">
            {{item.Company}}
        </td>
        <td data-title="'Email'" filter="{ 'Email': 'text' }" sortable="'Email'">
            {{item.Email}}
        </td>
        <td data-title="'License'">
            <button class="copy-button" data-clipboard-text="{{item.Value}}"><i class="glyphicon glyphicon-paperclip"></i></button>
        </td>
        <td style="max-width: 80px;">
            <a class="btn btn-sm btn-primary" href="/Customer/Details/{{item.Id}}">Details</a>
            <a class="btn btn-sm btn-primary" href="/Customer/Edit/{{item.Id}}">Edit</a>
            <a class="btn btn-sm btn-primary" href="/Customer/Delete/{{item.Id}}">Delete</a>
        </td>
    </tr>
</table>
@Html.Partial("_CustomPager")

@section Scripts
{
    <script type="text/javascript">
        LMApp.factory('bootstrappedData', function() {
            return {
                items: @Html.Raw(Model)
                }
        });
    </script>
}